<template>
  <div class="menu">
    <el-card class="box-card menu-left">
      <template #header>
        <div class="card-header">
          <i
              class="el-icon-tickets title-icon"
          ></i>
          <span class="title-font">权限菜单</span>
        </div>
      </template>
      <el-input
          placeholder="菜单名称"
          v-model="menuDept">
      </el-input>
      <div style="width: 100%" v-loading="loading">
        <el-tree
            ref="dataTree"
            :data="dataTree"
            node-key="id"
            default-expand-all
            :props="defaultProps"
            :filter-node-method="filterNode"
            :expand-on-click-node="false">
          <template #default="{ node, data }">
        <span @click="queryAuthByMenu(data)" class="custom-tree-node" >
          <span>{{ data.name }}</span>
          <span  style="position: absolute;right: 0px">
           <inline-button  @click="addAuth(data,node)"   icon="el-icon-plus" name="新增"></inline-button>
          </span>
        </span>
          </template>
        </el-tree>
      </div>

    </el-card>
    <el-card class="box-card menu-right">
      <template #header>
        <div class="card-header">
          <i
              class="el-icon-lock title-icon"
          ></i>
          <span class="title-font">权限列表</span>
        </div>
      </template>
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="权限名称">
          <el-input v-model="queryForm.authName" placeholder="权限名称"></el-input>
        </el-form-item>
        <el-form-item label="菜单名称">
          <el-input v-model="queryForm.menuName" placeholder="菜单名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="clear">清除</el-button>
        </el-form-item>
      </el-form>
      <el-table
          :data="authData"
          :height="tableHeight-250"
          border
          v-loading="authLoading"
          stripe
          style="width: 100%">
        <el-table-column
            label="序号"
            header-align="center"
            align="center"
            type="index"
            width="50"
        >
        </el-table-column>
        <el-table-column
            prop="authName"
            header-align="center"
            align="center"
            label="权限名称"
            width="120">
        </el-table-column>
        <el-table-column
            header-align="center"
            align="center"
            prop="authCode"
            label="权限标识"
            width="220">
        </el-table-column>
        <el-table-column
            header-align="center"
            align="left"
            prop="menuName"
            label="所属菜单">
        </el-table-column>
        <el-table-column
            header-align="center"
            align="center"
            width="180"
            label="操作">
          <template #default="scope">
            <inline-button @click="viewAuth(scope.row)"   icon="el-icon-view" name="查看"></inline-button>
            <inline-button @click="editAuth(scope.row)"   icon="el-icon-edit" name="编辑"></inline-button>
            <inline-button @click="delAuth(scope.row)" is-del  icon="el-icon-delete" name="删除"></inline-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryForm.current"
          :page-sizes="[10, 30, 50, 100]"
          :page-size="queryForm.size"
          layout="total, sizes, prev, pager, next"
          :total="queryForm.total">
      </el-pagination>
    </el-card>
    <auth-add-update-form @reload="getAuthData" ref="authAddUpdateForm"></auth-add-update-form>
  </div>
</template>

<script>
import VueUtil from "@/util/VueUtil";
import {NuoMenuController,NuoAuthController} from "@/actions/controller";
import adapter from "@/sys/js/adapter";
import InlineButton from "@/components/button/inline-button";
import authAddUpdateForm from './auth-add-update-form'
export default {
  name: "auth",
  components:{
    InlineButton,
    authAddUpdateForm
  },
  data(){
    return{
      loading: false,
      dataTree: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      queryForm: {
        menuName: '',
        authName: '',
        menuId: '',
        current: 1,
        size: 10,
        total: 0
      },
      menuDept: '',
      authData: [],
      authLoading: false
    }
  },
  mixins: [adapter],
  mounted() {
    this.init()
    this.getAuthData()
  },
  watch: {
    menuDept(val) {
      this.$refs.dataTree.filter(val);
    }
  },
  methods: {
    init(){
      this.loading = true
      VueUtil(this).ajax(NuoMenuController.queryMenuAll).then(res=>{
        this.dataTree = res.data
        this.loading = false
      }).catch(()=>{
        this.loading = false
      })
    },
    getAuthData(){
      this.authLoading = true
      VueUtil(this).ajax(NuoAuthController.queryAuthPageByParam,this.queryForm).then(res=>{
        this.authData = res.data.records
        this.queryForm.total = res.data.total
        this.authLoading = false
      }).catch(()=>{
        this.authLoading = false
      })
    },
    query(){
       Object.assign(this.queryForm,{
         current: 1,
         size: 10
       })
       this.getAuthData()
    },
    viewAuth(row){
      this.authLoading = true
       VueUtil(this).ajax(NuoAuthController.queryByAuthId,{authId:row.authId}).then(res=>{
         this.$refs.authAddUpdateForm.init("查看权限",res.data,true)
         this.authLoading = false
       }).catch(()=>{
         this.authLoading = false
       })
    },
    editAuth(row){
      this.authLoading = true
      VueUtil(this).ajax(NuoAuthController.queryByAuthId,{authId:row.authId}).then(res=>{
        this.$refs.authAddUpdateForm.init("修改权限",res.data)
        this.authLoading = false
      }).catch(()=>{
        this.authLoading = false
      })
    },
    delAuth(row){
      VueUtil(this).del("此操作将删除此权限",NuoAuthController.deleteByAuthId,{authId:row.authId},()=>{
        this.getAuthData()
      })
    },
    clear(){
      Object.assign(this.$data.queryForm, this.$options.data().queryForm);
      this.getAuthData()
    },
    queryAuthByMenu(data){
     this.queryForm.menuId = data.id
     this.getAuthData()
    },
    addAuth(data){
      this.$refs.authAddUpdateForm.init("新增权限",{
        menuId: data.id,
        menuName: data.name
      })
    },
    //页面条数变更时触发
    handleSizeChange(val){
      this.queryForm.size = val
      this.getAuthData()

    },
    //当前页面变更时触发
    handleCurrentChange(val){
      this.queryForm.current = val
      this.getAuthData()

    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    }
  }
}
</script>

<style scoped>

</style>